<template>
  <div class="to_do_formDialog_dialog" v-dialog-hover>
    <!-- 代办事项弹窗 -->
    <!-- :append-to-body="true" -->
    <el-dialog
      v-model="visible"
      :title="`${isEdit ? '编辑' : '新建'}待办`"
      :show-close="false"
      :close-on-click-modal="false"
      top="20vh"
      center
      width="800px"
    >
      <div v-loading="dialogLoading" class="dialog_container">
        <div class="form_box">
          <el-form
            ref="formRef"
            :rules="rules"
            :model="form"
            label-width="100px"
          >
            <el-form-item label="日期时间：">
              <el-date-picker
                v-model="form.date1"
                type="datetime"
                placeholder="请选择"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="内容：" prop="reportText">
              <el-input
                type="textarea"
                rows="3"
                v-model="form.reportText"
              ></el-input>
            </el-form-item>

            <el-form-item label="提示消息：">
              <el-switch
                v-model="form.asRoof"
                inline-prompt
                active-text="开启"
                inactive-text="关闭"
                style="margin-right: 50px"
              />
              <el-button size="small" @click="testMessage">
                演示消息
              </el-button>
            </el-form-item>

            <el-form-item label="提示通知：">
              <el-switch
                v-model="form.asRoof"
                inline-prompt
                active-text="开启"
                inactive-text="关闭"
                style="margin-right: 50px"
              />
              <el-button size="small" @click="testNotification">
                演示通知
              </el-button>
            </el-form-item>

            <el-form-item label="提示邮件：">
              <el-switch
                v-model="form.asRoof"
                inline-prompt
                active-text="开启"
                inactive-text="关闭"
                style="margin-right: 50px"
              />
              <el-button size="small"> 演示邮件 </el-button>
            </el-form-item>
          </el-form>
        </div>

        <div style="text-align: center; padding-top: 30px">
          <el-button
            type="primary"
            @click="onAddMethod"
            :loading="confirmBtnLoading"
          >
            保存
          </el-button>
          <el-button @click="close">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance, computed, nextTick } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

const initFormData = () => {
  return {
    id: null,
    moduleIds: null,
    moduleNames: null,
    splitChar: "、",
    reportText: null,
    workProgress: 0,
    reportTime: null,
  };
};

export default {
  name: "ToDoFormDialog",
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const $api = proxy.$api;
    const router = useRouter();
    const store = useStore();

    const isEdit = ref(false);
    // 弹框是否显示
    const visible = ref(false);
    // 是否开启整个弹框loading（开启时无法关闭弹框）
    const dialogLoading = ref(false);
    // 确认按钮loading（开启时可以关闭弹框）
    const confirmBtnLoading = ref(false);
    // 表单的引用
    const formRef = ref(null);
    // 级联组件的引用
    const cascaderRef = ref(null);
    // 表单数据
    const form = reactive(initFormData());
    // 表单校验规则
    const rules = reactive({
      // moduleIds: [{
      //   required: true,
      //   trigger: "blur",
      //   validator: (rule, value, callback) => {
      //     let choose = cascaderRef.value.getCheckedNodes();
      //     if (!choose.length) {
      //         callback(new Error('请选择模块名称'))
      //     } else {
      //         callback()
      //     }
      //   }
      // }],
      reportText: [
        { required: true, message: "请输入工作内容", trigger: "blur" },
      ],
      workProgress: [
        { required: true, message: "请选择工作进度", trigger: "blur" },
      ],
    });

    // 计算属性
    const userInfo = computed(() => store.state.user.userInfo);

    // 选择模块
    const changeModuleIds = ({ moduleIds, moduleNames }) => {
      console.log("changeModuleIds => ", { moduleIds, moduleNames });
      if (moduleIds && moduleNames) {
        form.moduleIds = moduleIds;
        form.moduleNames = moduleNames;
      }
    };

    // 立即添加
    const onAddMethod = () => {
      // 需要检查有没有填写真实姓名
      if (!userInfo.value.truename) {
        ElMessageBox.confirm(
          `你还没有填写你的【姓名】，需要现在去填写吗？`,
          "提示",
          { type: "warning" }
        )
          .then(() => {
            close();
            router.push("/user");
          })
          .catch(() => {});
        return;
      }
      formRef.value.validate((valid) => {
        if (valid) {
          // console.log("校验通过 => form", form);
          dialogLoading.value = true;
          // 判断是否是编辑状态，如果是，并且没有选择，则保留原来的数据
          // 不是编辑状态，清空 cascade 数据
          // if (!form.id) {
          //   form.moduleIds = "";
          //   form.moduleNames = "";
          // }
          if (!form.splitChar) {
            form.splitChar = "、";
          }
          // console.log("提交form= ", form);
          $api.report
            .addReport(form)
            .then((res) => {
              ElMessage.success("操作成功！");
              // 触发事件，把数据传递给父组件
              context.emit("refresh");
              close();
            })
            .catch((err) => {
              console.error("addReport error: ", err);
            })
            .finally(() => {
              dialogLoading.value = false;
            });
        } else {
          return false;
        }
      });
    };

    const testMessage = () => {
      ElNotification({
        title: "新消息",
        message: "这是一条演示的通知信息",
        duration: 0,
      });
    };

    const testNotification = () => {
      if (window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function (status) {
          if (status === "granted") {
            const n = new Notification("新消息", {
              body: "这是一条演示的通知信息",
            });
            // 实例对象的事件
            /*
                  show：通知显示给用户时触发。
                  click：用户点击通知时触发。
                  close：用户关闭通知时触发。
                  error：通知出错时触发（大多数发生在通知无法正确显示时）。
                
                */
            // n.onshow = function() {
            //     console.log('Notification shown');
            // };
            n.click = function () {
              console.log("Notification click");
              n.close.bind(n);
            };

            // close方法
            // Notification实例的close方法用于关闭通知。

            // 手动关闭
            // n.close();
            // 自动关闭
            // n.onshow = function () {
            //   setTimeout(n.close.bind(n), 10000);
            // };
          } else {
            // 如果用户拒绝接收通知，可以用alert方法代替。
            alert("用户拒绝接收通知");
          }
        });
      } else {
        // 不支持
        alert("您的浏览器不支持此通知");
      }
    };

    // 打开弹框
    const open = (row, reportTime) => {
      if (row) {
        Object.keys(form).forEach((item) => {
          form[item] = row[item];
        });
        isEdit.value = true;
      } else {
        isEdit.value = false;
        form.reportTime = reportTime;
      }
      visible.value = true;
    };

    // 关闭弹框
    const close = () => {
      resetData();
      visible.value = false;
    };

    // 重置
    const resetData = () => {
      // 重置表单校验
      formRef.value && formRef.value.resetFields();
      // 重置表单数据
      Object.keys(form).forEach((item) => {
        form[item] = initFormData()[item];
      });
    };

    return {
      visible,
      dialogLoading,
      confirmBtnLoading,
      formRef,
      cascaderRef,
      form,
      rules,
      open,
      close,
      resetData,
      changeModuleIds,
      onAddMethod,
      isEdit,
      testMessage,
      testNotification,
    };
  },
};
</script>

<style lang="less" scoped>
.to_do_formDialog_dialog {
}
</style>
